<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			#wrap {
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				top: 0;
				margin: auto;

				width: 400px;
				height: 400px;
				border: 1px solid;
				
				/* background: url(../08_2D变换/img/open.png) no-repeat; */
				/* background-size: 100% 100%; */

				perspective: 200px;
				/*开启3d舞台 这是一个不可继承的属性*/
				transform-style: preserve-3d;
			}

			#wrap>.box {
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				top: 0;
				margin: auto;

				width: 100px;
				height: 100px;
				/* background: pink; */

				transition: 3s;				
				
				/*这个属性一定要写在初始化box这里，别写在hover中*/
				transform-origin: center center -50px;

				transform: rotateX(-30deg) rotateY(-30deg);
				
				/*开启3d舞台 这是一个不可继承的属性*/
				transform-style: preserve-3d;
			}

			#wrap:hover .box {
				/* transform: rotateY(360deg) rotateX(360deg); */
				transform: rotateX(180deg) rotateZ(90deg);
				/* transform: rotate3d(1,1,1,720deg); */
			}

			#wrap>.box>div {
				position: absolute;
				width: 100px;
				height: 100px;
				/* background: deeppink; */
				text-align: center;
				font: 40px/100px "agency fb";
				/* border: 1px solid; */
				/*这样就能隐藏box中不被看到的面*/
				backface-visibility: hidden;
			}

			#wrap>.box>div:nth-child(1) {
				/*前*/
				/* top: -100px; */
				background: rgba(90, 90, 90, 0.2);
			}

			#wrap>.box>div:nth-child(2) {
				/*后*/
				/* top: -100px; */
				transform: translateZ(-100px);
				background: rgba(140, 140, 140, .5);
			}

			#wrap>.box>div:nth-child(3) {
				/*左*/
				transform-origin: right;
				transform: rotateY(-90deg);
				background: rgba(120, 120, 120, .5);
				left: -100px;
			}

			#wrap>.box>div:nth-child(4) {
				/*右*/
				transform-origin: left;
				transform: rotateY(90deg);
				background: rgba(130, 130, 130, .5);
				right: -100px;
			}

			#wrap>.box>div:nth-child(5) {
				/*上*/
				transform-origin: bottom;
				transform: rotateX(90deg);
				background: rgba(100, 100, 100, .5);
				top: -100px;
			}

			#wrap>.box>div:nth-child(6) {
				/*下*/
				transform-origin: top;
				transform: rotateX(-90deg);
				background: rgba(110, 110, 110, .5);
				bottom: -100px;
			}
		</style>
	</head>
	<body>
		<div id="wrap">
			<div class="box">
				<div>前</div>
				<div>后</div>
				<div>左</div>
				<div>右</div>
				<div>上</div>
				<div>下</div>
			</div>
		</div>
	</body>
</html>
